<template>
  <div>
    <div class="topDiv">
      <div class="bimai">
        <router-link to="/biguan">
          <img src="../../../assets/1first/2贼惦记/biguanxiulian.png" alt="">
        </router-link>
      </div>
      <div class="Go">
        <div class='bige'>
          <img src="../../../assets/1first/2贼惦记/chaobige.png" alt="">
        </div>
        <router-link to="/mustlist">
          <div>
            <img src="../../../assets/1first/2贼惦记/bimaiqingdan.png" alt="">
          </div>
        </router-link>
      </div>
    </div>
    <div class="bottomDiv">
      <h2>即将开售</h2>
      <div>
        <p class="title">美妆专区</p>
        <div class="clearfix">
          <div class="shangpin fl" v-for="item in 6">
            <div class="shangpinTop">
              <img src="../../../assets/1first/2贼惦记/repin.png" alt="" class="repin">
              <img src="../../../assets/1first/2贼惦记/huiwuxisihua.png" alt="" class="tupian">
              <p class="desc">会呼吸丝滑蜜粉</p>
            </div>
            <div class="shangpinBottom">
              <p class="start">即将开始</p>
              <p class="time">
                倒计时: <span>00</span>时<span>00</span>分<span>00</span>秒
              </p>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
</script>
<style scoped>
  .topDiv{
    display: flex;
    background: #fff;
    padding: 0.44rem;
    border-bottom: 1px solid #ccc;
  }
  .bimai{
    width: 6.4rem;
    flex: none;
    text-align: center;
    border-right: 1px solid #ccc;
  }
  .bimai img {
    width: 85%;
  }
  .Go{
    flex: 1;
    padding-left: 5px;
    box-sizing: border-box;
  }
  .Go div{
    text-align: center;
  }
  .Go div img{
    width: 85%;
  }
  .bige{
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
  }
  .bottomDiv{
    margin-top: 0.44rem;
    padding: 0.44rem;
    background: #fff;
    text-align: center;
  }
  .bottomDiv h2{
    color: #e53e42;
    font-size: 0.8rem;
    font-weight: normal;
    margin-bottom: 0.84rem;
  }
  .title{
    color: #4d4d4d;
    font-size: 0.67rem;
    margin-bottom: 0.31rem;
  }
  .shangpinTop{
    border: 1px solid #ccc;
    width: 4.45rem;
    height: 5.33rem;
    position: relative;
    padding-top: 1.2rem;
    box-sizing: border-box;
    overflow: hidden;
  }
  .repin{
    position: absolute;
    top: 0;
    left: 0;
    width: 0.89rem;
  }
  .tupian{
    width: 60%;
  }
  .desc{
    margin-top: 0.22rem;
    color: #4d4d4d;
    font-size: 0.53rem;
  }
  .shangpinBottom{
    text-align: left;
    margin-top: 0.22rem;
    font-size: 0.4rem;
  }
  .time span{
    color: #e53e42;
  }
  .clearfix{
    width: 100%;
  }
  .clearfix>div{
    width: 30%;
    margin: 0 0.24rem;
    text-align: center;
    margin-bottom: 0.22rem;
  }
</style>
